<template>
  <div>
    <button @click="color = 'blue'">修改蓝色</button>
    <button @click="show = false">销毁</button>
    <button @click="msg = '马杀鸡'">修改msg</button>

    <p>{{ msg }}</p>
    <p v-if="show" v-color="color">这是p1</p>

    <my-son />
    <my-card />
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  components: {
    MySon
  },
  data () {
    return {
      color: 'red',
      show: true,
      msg: '你好'
    }
  },
  // 只能在app.vue里用
  filters: {

  },
  directives: {
    // color (el, obj) {
    //   // 是bind和update的简写
    //   el.style.color = obj.value
    // }

    // color: {
    //   // 自定义指令的钩子
    //   // 当指令绑定到对象时对象，是最早的钩子 - 相当于 created
    //   bind (el, obj) {
    //     console.log('bind')
    //     el.style.color = obj.value
    //   },
    //   // 当指令绑定的元素插入到某一个父元素时调用
    //   // 相当于 mounted
    //   inserted () {
    //     console.log('inserted')
    //   },

    //   // 它所在的组件任意dom发生改变都会触发
    //   // 不一定是数据改变了，而是只要它所在的组件有dom更新那都会调用
    //   update (el, obj) {
    //     console.log('update')
    //     el.style.color = obj.value
    //   },
    //   // 它所在的组件dom发生改变，而且它组件里的子组件也更新完毕才调用
    //   componentUpdated () {
    //     console.log('componentUpdated')
    //   },

    //   // 解绑时，解绑-销毁时调用
    //   unbind () {
    //     console.log('unbind')
    //   }
    // }
  }
}
</script>

<style></style>
